/*
 * @Author: lyx 2858535420@qq.com
 * @Date: 2022-10-10 22:31:07
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-04-27 11:17:45
 * @FilePath: /bangand-low-code/src/assets/less/global.less
 * @Description: 公共样式
 */

// @import '~ant-design-vue/es/style/themes/default.less';
@import './font/iconfont.css';
// @import './theme/index.less';

html,
body,
#app,
#root {
  height: 100%;
}


// =================================
// ==============scrollbar==========
// =================================

::-webkit-scrollbar {
  width: 7px;
  height: 8px;
}

// ::-webkit-scrollbar-track {
//   background: transparent;
// }

::-webkit-scrollbar-track {
  // background-color: rgb(0 0 0 / 5%);
  background-color: #0000000d;
}

::-webkit-scrollbar-thumb {
  // background: rgba(0, 0, 0, 0.6);
  // background-color: rgb(144 147 153 / 30%);
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 2px;
  // box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
  box-shadow: inset 0 0 6px #00000033;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #b6b7b9;
  // background-color: #de8908;
}

.colorWeak {
  filter: invert(80%);
}

.ant-layout.layout-basic {
  height: 100vh;
  min-height: 100vh;
}

canvas {
  display: block;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

ul,
ol {
  list-style: none;
}

// 数据列表 样式
.table-alert {
  margin-bottom: 16px;
}

// 数据列表 操作
.table-operator {
  margin-bottom: 18px;

  button {
    margin-right: 8px;
  }
}

// 数据列表 搜索条件
.table-page-search-wrapper {
  .ant-form-inline {
    .ant-form-item {
      display: flex;
      margin-right: 0;
      margin-bottom: 24px;

      .ant-form-item-control-wrapper {
        flex: 1 1;
        display: inline-block;
        vertical-align: middle;
      }

      >.ant-form-item-label {
        width: auto;
        padding-right: 8px;
        line-height: 32px;
      }

      .ant-form-item-control {
        height: 32px;
        line-height: 32px;
      }
    }
  }

  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
}

@media (max-width: @screen-xs) {
  .ant-table {
    width: 100%;
    overflow-x: auto;

    &-thead>tr,
    &-tbody>tr {

      >th,
      >td {
        white-space: pre;

        >span {
          display: block;
        }
      }
    }
  }
}

// @padding-xl: 24px; // containers
// @padding-lg: 20px;
// @padding-md: 16px; // small containers and buttons
// @padding-sm: 12px; // Form controls and items
// @padding-xs: 8px; // small items
// 生成 padding/margin 公用样式
// 使用方法：x-padding-xs/x-p-xs 
@pmList: 8px, 12px, 16px, 20px, 24px;
@pmListTxt: xs, sm, md, lg, xl;

each(@pmListTxt, {

  .x-padding-@{value},
  .x-p-@{value} {
    padding: extract(@pmList, @index);
  }

  .x-padding-left-right-@{value},
  .x-p-l-r-@{value} {
    padding:0 extract(@pmList, @index);
  }

  .x-padding-top-bottom-@{value},
  .x-p-t-b-@{value} {
    padding: extract(@pmList, @index) 0;
  }

  .x-padding-top-@{value},
  .x-p-t-@{value} {
    padding-top: extract(@pmList, @index);
  }

  .x-padding-bottom-@{value},
  .x-p-b-@{value} {
    padding-bottom: extract(@pmList, @index);
  }

  .x-padding-left-@{value},
  .x-p-l-@{value} {
    padding-left: extract(@pmList, @index);
  }

  .x-padding-right-@{value},
  .x-p-r-@{value} {
    padding-right: extract(@pmList, @index);
  }

  .x-margin-@{value},
  .x-m-@{value} {
    margin: extract(@pmList, @index);
  }

  .x-margin-left-right-@{value},
  .x-m-l-r-@{value} {
    margin:0 extract(@pmList, @index);
  }

  .x-margin-top-bottom-@{value},
  .x-m-t-b-@{value} {
    margin: extract(@pmList, @index) 0;
  }

  .x-margin-top-@{value},
  .x-m-t-@{value} {
    margin-top: extract(@pmList, @index);
  }

  .x-margin-bottom-@{value},
  .x-m-b-@{value} {
    margin-bottom: extract(@pmList, @index);
  }

  .x-margin-left-@{value},
  .x-m-l-@{value} {
    margin-left: extract(@pmList, @index);
  }

  .x-margin-right-@{value},
  .x-m-r-@{value} {
    margin-right: extract(@pmList, @index);
  }
});

// 生成文字样式
.x-font-bold,
.x-f-b {
  font-weight: bold;
}

// 14号字
.x-font-14,
.x-f-14 {
  font-size: @font-size-base;
  line-height: 22px;
  color: @heading-color;
}

// 14 号字加粗
.x-font-bold-14,
.x-f-b-14 {
  .x-font-14();
  .x-font-bold();
}

// 16号字
.x-font-16,
.x-f-16 {
  font-size: @font-size-lg;
  line-height: 24px;
  color: @heading-color;
}

// 16 号字加粗
.x-font-bold-16,
.x-f-b-16 {
  .x-font-16();
  .x-font-bold();
}

.x-border-solid,
.x-b-s {
  border: 1px solid @general-border-color;
  border-radius: 2px;
}

@borderDir: left, right, top, bottom;

each(@borderDir, {
  .x-border-solid-@{value} {
    border-@{value}: 1px solid @general-border-color;
  }
});

// 通用页面样式

// 通用 flex 布局
// ---------- 横向排列
.flex,
.flex-row {
  display: flex;
  flex-direction: row
}

.flex-row-start {
  .flex-row();
  align-items: flex-start;
}

.flex-row-start-start {
  .flex-row-start();
  justify-content: flex-start;
}

.flex-row-center {
  .flex-row();
  align-items: center;
}

.flex-row-center-start {
  .flex-row-center();
  justify-content: flex-start;
}

.flex-row-center-end {
  .flex-row-center();
  justify-content: flex-end;
}

.flex-row-center-center {
  .flex-row-center();
  justify-content: center;
}

//横向换行
.flex-row-wrap {
  .flex-row-start();
  flex-wrap: wrap;
}

//横向上下居中换行
.flex-row-center-wrap {
  .flex-row-center();
  flex-wrap: wrap;
}

// 横向不换行
.flex-row-nowrap {
  .flex-row();
  flex-wrap: nowrap;
}

//水平居上，两端
.flex-row-start-between {
  .flex-row-start();
  justify-content: space-between;
}

//水平居中，两端
.flex-row-center-between {
  .flex-row-center();
  justify-content: space-between;
}

//水平居中，末尾
.flex-row-center-end {
  .flex-row-center();
  justify-content: flex-end;
}

//水平居下，中
.flex-row-end-center {
  .flex-row();
  align-items: flex-end;
  justify-content: center;
}

//水平居中，平均分布
.flex-row-center-around {
  .flex-row-center();
  justify-content: space-around;
}

// 水平翻转
.flex-row-reverse {
  flex-direction: row-reverse;
}

// ------------ 纵向排列
.flex-col {
  display: flex;
  flex-direction: column;
}

//纵向居中
.flex-col-center {
  .flex-col();
  align-items: center;
}

//纵向水平居中
.flex-col-center-center {
  .flex-col-center();
  justify-content: center;
}

//纵向靠左居中
.flex-col-start {
  .flex-col();
  align-items: flex-start;
}

//纵向靠右居中
.flex-col-end {
  .flex-col();
  align-items: flex-end;
}

// flex 布局
.x-flex-sub {
  flex: 1;
}

.x-flex-twice {
  flex: 2;
}

.x-flex-treble {
  flex: 3;
}

.x-flex-grow {
  flex-grow: 1;
}

.x-page-card {
  .ant-card-body {
    padding: extract(@pmList, 2);
  }
}